import React, { Component } from 'react'
import {connect} from 'react-redux'
import {createCheckAllAction,createDeleteDoneAction} from '../../redux/action/List'


class Footer extends Component {
    handleDeleteDone = () => {
        this.props.deleteDone()
    }
    handleCheckAll = (event) => {
        this.props.checkAll(event.target.checked)
    }
    render() {
        const {list} = this.props
        const checkItem = list.reduce((total,todo) => total + (todo.done?1:0),0)
        return (
            <div className="todo-footer">
                <label>
                <input type="checkbox" 
                checked={checkItem === list.length && list.length !==0 ? true:false} 
                onChange={this.handleCheckAll}/>
                </label>
                <span>
                <span>已完成{checkItem}</span> / 全部{list.length}
                </span>
                <button className="btn btn-danger" onClick={this.handleDeleteDone}>清除已完成任务</button>
            </div>
        )
    }
}

export default connect(
    state => ({list:state}),
    {
        checkAll: createCheckAllAction,
        deleteDone: createDeleteDoneAction
    }
)(Footer)